<template>
    <div></div>
</template>
<script>
export default {
    data() {
        return {
            lineChart: null
        };
    },
    props: {
        xAxisData: {
            type: Array,
            required: false,
            default: () => {
                return ['0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000']
            }
        },
        seriesData: {
            type: Array,
            required: false,
            default: () => {
                return [0.11, 0.12, 0.13, 0.22, 0.33, 0.34, 0.35, 0.50, 0.73, 0.81, 0.99]
            }
        },
        yAxisName: {
            type: String,
            required: false,
            default: () => {
                return "Test Percision"
            }
        },
        xAxisName: {
            type: String,
            required: false,
            default: () => {
                return "Train Rounds"
            }
        },

    },
    watch: {
        isOptionChange(newVal, oldVal) {
                const { initLineChart } = this;
                initLineChart();
        }
    },
    computed: {
        isOptionChange({ xAxisData, seriesData, yAxisMax }) {
            return { xAxisData, seriesData, yAxisMax };
        }
    },
    mounted() {
        this.initLineChart();
    },
    methods: {
        initLineChart() {
            const container = this.$el;
            if (this.lineChart == null) this.lineChart = this.$echarts.init(container);
            const chart = this.lineChart;
            const _this = this;
            let option = {
                tooltip: {
                    show: true
                },
                textStyle: {
                    color: '#A8ABB2'
                },
                grid: {
                    bottom: '15%',
                    top: '15%',
                    right: '13%',
                    // containLabel: true
                },
                xAxis: {
                    name: _this.xAxisName,
                    type: 'category',
                    boundaryGap: true,

                    axisTick: {
                        // 轴刻度
                        show: false,
                    }, axisLabel: {
                        margin: 15 // 调整刻度标签和坐标轴名称之间的间距
                    },

                    data: _this.xAxisData,
                    nameTextStyle: {
                        color: '#303133',
                        fontSize: 14,
                        padding: [8, 0, 0, -10],
                        verticalAlign: "top"
                    },
                },
                yAxis: {
                    name: _this.yAxisName,
                    type: 'value',
                    nameTextStyle: {
                        color: '#303133',
                        fontSize: 14,
                    },
                    splitLine: {    //网格线
                        lineStyle: {
                            type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: true //隐藏或显示
                    }
                },
                series: [
                    {
                        data: _this.seriesData,
                        type: 'line'
                    }
                ]
            };
            chart.setOption(option);
        }
    }
};
</script>
<style lang="scss" scoped></style>